<template>
  <div>
    <el-dialog title="EDIT PERSON" :visible.sync="dialogVisible" width="50%">
        <el-form
        :model="rowData"
        :rules="rules"
        ref="rowData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="Name" prop="name">
          <el-input v-model="rowData.name"></el-input>
        </el-form-item>
        <el-form-item label="Hobby" prop="hobby">
          <el-input
            type="textarea"
            v-model="rowData.hobby"
          ></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="offDialogView('rowData')">Cancel</el-button>
          <el-button type="primary" @click="edit('rowData')"
            >Sure</el-button
          >
        </span>
      </el-dialog>
   
  </div>
</template>

<script>
export default {
  props: {
    rowData: {
      type: Object,
      require: true,
    },
    dialogVisible:Boolean
  },
  data() {
    return {
      dataForm: JSON.parse(JSON.stringify(this.rowData)),
      rules: {
        name: [
          { required: true, message: "请输入你的姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        hobby: [{ required: true, message: "请填写你的爱好", trigger: "blur" }],
      },
    };
  },
  methods: { 
    offDialogView(formName){
        this.$emit('update:dialogVisible',false)
        this.$refs[formName].resetFields();
    },
    edit(formName){
        this.$refs[formName].validate((valid) => {
        if (valid) {
        //   this.$emit("update:rowData", this.rowData);
          this.$emit('update:dialogVisible',false)
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>